<template>
  <div class="cert">
    <div class="cert-bg" ref="certBg">
      <img v-if="userInfo.levelDicCode == '1003'" class="cert-img" src="../assets/image/cert2.png" alt="" />
      <img v-else class="cert-img" src="../assets/image/cert1.png" alt="" />
      <div class="cert-name">恭喜 <span> {{ userInfo.userName }}</span></div>
    </div>
    <div class="cert-result">
      <img :src="certImage" alt="Certificate Result" />
    </div>
    <div>
      <img @click="backFn()" class="back-img" src="../assets/image/back.png" alt="" />
    </div>
    <div class="save-text">*长按图片保存证书</div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import moment from 'moment';
export default {
  data () {
    return {
      userInfo: JSON.parse(localStorage.getItem('userInfo')) || {},
      certImage: ''
    }
  },
  mounted () {
    // this.getcertNo()
    this.generateCertImage();
  },
  methods: {
    getcertNo () {
      if (this.userInfo.pass == 'pass' && !this.userInfo.certNo) {
        this.userInfo.certNo = moment().valueOf()
        localStorage.setItem("userInfo", JSON.stringify(this.userInfo))
      }
    },
    backFn () {
      // this.$router.push("/home");
      this.$router.replace("/home");
    },
    generateCertImage () {
      const certBg = this.$refs.certBg;
      html2canvas(certBg, {
        scale: window.devicePixelRatio,
        taintTest: false,
        backgroundColor: null
      }).then(canvas => {
        this.certImage = canvas.toDataURL("image/png");
        certBg.remove();
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.cert {
  position: relative;
  height: 100vh;
  background: url('../assets/image/cert-bg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 24px;
  .cert-bg {
    position: relative;
    width: 90%;
    margin-left: 5%;
    .cert-img {
      width: 100%;
      z-index: 1;
    }
    .cert-no {
      position: absolute;
      top: 210px;
      width: 100%;
      text-align: center;
      color: #ff4e17;
      font-size: 12px;
    }
    .cert-name {
      position: absolute;
      top: 232px;
      width: 100%;
      text-align: center;
      font-size: 16px;
      z-index: 100;
      span {
        color: #0b92e4;
        text-decoration: underline;
        text-underline-offset: 3px;
      }
    }
  }
  .cert-result {
    margin-top: 24px;
    width: 90%;
    margin-left: 5%;
    img {
      width: 100%;
    }
  }
  .back-img {
    width: 54px;
    position: absolute;
    top: 14px;
  }
  .save-img {
    width: 54px;
    position: absolute;
    top: 18px;
    right: 20px;
  }
  .save-text {
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 10px;
    color: #333333;
    line-height: 21px;
  }
}
</style>
